<template>
    <el-header style="justify-content: normal">
        <el-dropdown placement="bottom-end" @command="">
            <span class="el-dropdown__box">
                <el-icon><Bell/></el-icon>
                消息通知
                <el-icon><CaretBottom/></el-icon>
            </span>
            <template #dropdown>
                <el-dropdown-menu>
                    
                    <el-dropdown-item command="resetPassword" :icon="Bell">消息栏</el-dropdown-item>
                
                </el-dropdown-menu>
            </template>
        </el-dropdown>
        <el-dropdown placement="bottom-end" @command="">
            <span class="el-dropdown__box">
                <el-icon><Setting/></el-icon>
                系统设置
                <el-icon><CaretBottom/></el-icon>
            </span>
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item command="info" :icon="User">
                        <router-link to="/users/user-info" class="el-dropdown-item-link">基本信息</router-link>
                    </el-dropdown-item>
                    
                    <el-dropdown-item command="avatar" :icon="Crop">
                        <a href="../../public/AvatarSettings.html" target="_blank"
                           class="el-dropdown-item-link">更换头像</a>
                    </el-dropdown-item>
                    
                    <el-dropdown-item command="resetPassword" :icon="EditPen">修改密码</el-dropdown-item>
                    <el-dropdown-item @click="logout" command="logout" :icon="SwitchButton">退出登录
                    </el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
        <span
            style="font-size: 14px;font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;color: #606266">{{
                username
            }}</span>
        <div style="display: block;margin: 10px 10px;position: absolute;top: 0;left: 260px;font-style: italic">
            {{ welcomeMessage }}
        </div>
        <!-- 时钟和日期 -->
        <el-card class="clock-card">
            <div class="clock">
                <!-- 添加图标 -->
                <el-icon class="icon-clock">
                    <Clock/>
                </el-icon>
                <!-- 格式化日期和时间显示 -->
                {{ formattedDateTime }}
            </div>
        </el-card>
    </el-header>
</template>

<script setup lang="ts">

import {Bell, CaretBottom, Clock, Crop, EditPen, Setting, SwitchButton, User} from "@element-plus/icons-vue";
import {getLocalStorage} from "../util/storage.util";
import {logoutUser} from "../service/user.service";
import {onMounted, ref} from "vue";
import {useRouter} from "vue-router";

const welcomeMessage = ref('')
const username = ref('')

const router = useRouter(); // 使用Vue Router的useRouter钩子
// 存储格式化后的日期和时间
const formattedDateTime = ref('');
const updateDateTime = () => {
    // 创建日期对象
    const now = new Date();
    // 格式化日期和时间
    const dateTime = now.toLocaleString('zh-CN', {
        hour12: false, // 24小时制
        year: 'numeric',
        month: 'numeric',
        day: 'numeric',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit',
    });
    // 更新响应式变量
    formattedDateTime.value = dateTime;
};
const logout = () => {
    logoutUser(getLocalStorage("Token"))
}

onMounted(() => {
    let UserInfo = JSON.parse(<string>getLocalStorage("UserInfo"))
    let role: string = UserInfo.userInfo.role
    username.value = UserInfo.username
    if (role === "USER") {
        welcomeMessage.value = "欢迎使用教学过程管理系统学生端"
    } else {
        welcomeMessage.value = "欢迎使用教学过程管理系统教师端"
    }
})
const currentTime = ref(new Date().toLocaleTimeString());

onMounted(() => {
    // 每1000毫秒更新一次日期和时间
    setInterval(updateDateTime, 1000);
    // 初始化日期和时间
    updateDateTime();
});
</script>


<style scoped>

.el-header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.4);
    background-color: #fff;
    display: flex;
    flex-direction: row-reverse;
    gap: 10px;
    align-items: center;
    height: 40px;
    
    .el-dropdown__box {
        display: flex;
        align-items: center;
        
        .el-icon {
            color: #999;
            margin-left: 10px;
        }
        
        &:active,
        &:focus {
            outline: none;
        }
    }
}

.clock-card {
    width: 250px;
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #14b2f5; /* 背景颜色设置为半透明 */
    
    box-shadow: 0 2px 12px 0 rgba(234, 220, 220, 0.47);
    
    .clock {
        font-size: 20px;
        color: #ffffff;
        font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
    }
}
</style>